class Cart {
    constructor() {
        this.cartItems = document.getElementById('cartItems');
        this.subtotalEl = document.getElementById('subtotal');
        this.totalEl = document.getElementById('total');
        this.checkoutBtn = document.getElementById('checkoutBtn');
        this.cart = [];
        
        this.init();
    }
    
    init() {
        this.loadCart();
        this.renderCart();
        this.addEventListeners();
    }
    
    loadCart() {
        this.cart = JSON.parse(localStorage.getItem('cart')) || [];
    }
    
    renderCart() {
        if (this.cart.length === 0) {
            this.cartItems.innerHTML = `
                <div class="empty-cart">
                    <p>购物车还是空的哦~</p>
                    <a href="index.html" class="btn">去逛逛</a>
                </div>
            `;
            this.subtotalEl.textContent = '¥0.00';
            this.totalEl.textContent = '¥0.00';
            this.checkoutBtn.disabled = true;
            return;
        }
        
        this.cartItems.innerHTML = this.cart.map(item => `
            <div class="cart-item" data-id="${item.id}">
                <img src="../images/${item.image}" alt="${item.name}" class="cart-item-img">
                <div class="cart-item-info">
                    <h3 class="cart-item-title">${item.name}</h3>
                    <div class="cart-item-price">¥${item.price}</div>
                    <div class="cart-item-controls">
                        <div class="quantity-control">
                            <button class="decrease">-</button>
                            <input type="number" value="${item.quantity}" min="1" class="quantity">
                            <button class="increase">+</button>
                        </div>
                        <span class="remove-item">删除</span>
                    </div>
                </div>
            </div>
        `).join('');
        
        this.updateTotals();
    }
    
    updateTotals() {
        const subtotal = this.cart.reduce((sum, item) => {
            return sum + (parseFloat(item.price) * item.quantity);
        }, 0);
        
        this.subtotalEl.textContent = `¥${subtotal.toFixed(2)}`;
        this.totalEl.textContent = `¥${subtotal.toFixed(2)}`;
    }
    
    addEventListeners() {
        this.cartItems.addEventListener('click', (e) => {
            const cartItem = e.target.closest('.cart-item');
            if (!cartItem) return;
            
            const productId = cartItem.getAttribute('data-id');
            const itemIndex = this.cart.findIndex(item => item.id === productId);
            
            if (e.target.classList.contains('decrease')) {
                this.updateQuantity(itemIndex, -1);
            } else if (e.target.classList.contains('increase')) {
                this.updateQuantity(itemIndex, 1);
            } else if (e.target.classList.contains('remove-item')) {
                this.removeItem(itemIndex);
            }
        });
        
        this.cartItems.addEventListener('change', (e) => {
            if (e.target.classList.contains('quantity')) {
                const cartItem = e.target.closest('.cart-item');
                const productId = cartItem.getAttribute('data-id');
                const itemIndex = this.cart.findIndex(item => item.id === productId);
                const newQuantity = parseInt(e.target.value);
                
                if (newQuantity > 0) {
                    this.cart[itemIndex].quantity = newQuantity;
                    this.saveCart();
                    this.updateTotals();
                } else {
                    e.target.value = this.cart[itemIndex].quantity;
                }
            }
        });
        
        this.checkoutBtn.addEventListener('click', () => {
            
            alert('结算功能还没实现');
        });
    }
    
    updateQuantity(index, change) {
        const newQuantity = this.cart[index].quantity + change;
        
        if (newQuantity < 1) {
            this.removeItem(index);
            return;
        }
        
        this.cart[index].quantity = newQuantity;
        this.saveCart();
        this.renderCart();
    }
    
    removeItem(index) {
        this.cart.splice(index, 1);
        this.saveCart();
        this.renderCart();
    }
    
    saveCart() {
        localStorage.setItem('cart', JSON.stringify(this.cart));
    }
}

// 初始化购物车
document.addEventListener('DOMContentLoaded', () => {
    if (document.getElementById('cartItems')) {
        new Cart();
    }
});